<template>
<div style="background-color: white;">

    <div class="demo-image__lazy">
      <el-image v-for="url in urls" :key="url" :src="url" lazy style="height: 300px;width: 1000px;"></el-image>
    </div>


  <div>

  <div class="demo-image__preview">
    <el-card class="box-card">
      <div>
        <el-image
            style="width: 200px; height: 200px;padding:50px;flex: 1;"
            :src="url"
            :preview-src-list="srcList"
        >
        </el-image>
        <div class="text item" style="position: absolute; width:400px;">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="余姚市启鸿塑化实力供应商" name="1">
              <div>
                浙江省余姚市凤山街道塑料城Z区1104B号(2楼)
              </div>
            </el-collapse-item>
            <el-collapse-item title="特色产品" name="2">
              <div>
                产品符号：PP
                牌号：K4912
                厂家：浙江石化
                材料类型：标准新料
                特性级别： 透明
                加工级别： 注塑级
                用途级别： 医疗器材
              </div>
            </el-collapse-item>
            <el-collapse-item title="经营范围" name="3">
              <div>一般项目：塑料制品销售；工程塑料及合成树脂销售；化工产品销售（不含许可类化工产品）(除依法须经批准的项目外，凭营业执照依法自主开展经营活动)。</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <el-image
          style="width: 200px; height: 200px;padding:50px;"
          :src="url1"
          :preview-src-list="srcList"
      >
      </el-image>
      <div class="text item" style="position: absolute; width:400px;">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="宁波鑫塑源塑化有限公司" name="1">
            <div>
              浙江省余姚市中国塑料城Z区1801号
            </div>
          </el-collapse-item>
          <el-collapse-item title="特色产品" name="2">
            <div>
              PP ABS PC
            </div>
          </el-collapse-item>
          <el-collapse-item title="经营范围" name="3">
            <div>工程塑料;通用塑料;特种塑料;热塑性弹性体;合成材料助剂</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</div>


</div>
</template>

<script>
export default {
  name: "Merchants",
  data() {
    return {
      urls: [
        'https://img-cdn.ibuychem.com/wiseshop/24/24/d023b45a482e4f2f80adb61b0318d3a6@400x0.png',
        'https://img-cdn.ibuychem.com/wiseshop/5/31/02565071ebb14c15966af78735f78147@400x0.png',
      ],
      files: [],
      url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fga.hr1000.com%2Fupimages%2Fcompic%2F2013422152617.jpg&refer=http%3A%2F%2Fga.hr1000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653633038&t=37fc51882925d62e40328bbbf586bd3f',
      url1: 'https://img2.baidu.com/it/u=4218328043,3778080325&fm=253&fmt=auto&app=138&f=JPEG?w=1038&h=500',
      srcList: [
        'https://cdn.tianyancha.com/web-require-js/themes/18blue/images/company-atlas/company-map-5-1.png',
        'https://img006.hc360.cn/k1/M07/3B/2B/c50701e82d1554Ad3Ae77e40532B0230A8.jpg',
      ],
    }
  },
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.text {
  font-size: 14px;
}

.item {
}

.box-card {
  width: 99%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>